<template>
  <view class="login-container">
    <!-- 顶部Logo -->
    <view class="logo-section">
      <image class="logo" src="/static/imgs/logo.png" mode="aspectFit"></image>
      <text class="slogan"><img src="https://yunke-static.lanqiao.cn/lanqiao/mobile/fro…nd/dist/img/lanqiao-header-yunke-logo.9b2adbf.svg" alt=""></text>
    </view>
    
    <!-- 登录表单 -->
    <view class="form-section">
      <view class="input-group">
        <view class="input-icon">
          <uni-icons type="person" size="20" color="#0086ff"></uni-icons>
        </view>
        <input 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号" 
          maxlength="11"
          class="input-item"
        />
      </view>
      
      <view class="input-group">
        <view class="input-icon">
          <uni-icons type="locked" size="20" color="#0086ff"></uni-icons>
        </view>
        <input 
          :type="showPassword ? 'text' : 'password'" 
          v-model="password" 
          placeholder="请输入密码" 
          class="input-item"
        />
        <view class="password-toggle" @click="showPassword = !showPassword">
          <uni-icons :type="showPassword ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999"></uni-icons>
        </view>
      </view>
      
      <button class="login-btn" @click="handleLogin">登录</button>
      
      <view class="action-links">
        <text class="forget-pwd">忘记密码?</text>
        <text class="register-link" @click="goToRegister">立即注册</text>
      </view>
    </view>
    
    <!-- 其他登录方式 -->
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      password: '',
      showPassword: false
    }
  },
  methods: {
    // 验证手机号格式
    validatePhone() {
      // 保持原有逻辑
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
        return false;
      }
      if (!phoneReg.test(this.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        });
        return false;
      }
      return true;
    },
    
    // 验证密码
    validatePassword() {
      // 保持原有逻辑
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return false;
      }
      return true;
    },
    
    // 处理登录
    handleLogin() {
      // 保持原有逻辑
      if (!this.validatePhone() || !this.validatePassword()) {
        return;
      }
      
      // 显示加载中
      uni.showLoading({
        title: '登录中...'
      });
      
      // 调用登录接口
      uni.request({
        url: 'http://localhost:3000/users',
        success: (res) => {
          uni.hideLoading();
          
          if (res.statusCode === 200) {
            const users = res.data;
            // 查找匹配的用户
            const user = users.find(u => u.phone === this.phone && u.password === this.password);
            
            if (user) {
              // 保存用户信息到本地存储
              uni.setStorageSync('userInfo', JSON.stringify({
                _id: user.id,
                username: user.username,
                phone: user.phone
              }));
              
              uni.showToast({
                title: '登录成功',
                icon: 'success',
                duration: 2000
              });
              
              // 登录成功后跳转到首页
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/index/index'
                });
              }, 2000);
            } else {
              uni.showToast({
                title: '手机号或密码错误',
                icon: 'none'
              });
            }
          } else {
            uni.showToast({
              title: '登录失败，请稍后再试',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({
            title: '网络错误，请稍后再试',
            icon: 'none'
          });
        }
      });
    },
    
    // 跳转到注册页面
    goToRegister() {
      uni.navigateTo({
        url: '/pages/login/register'
      });
    }
  }
}
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0 60rpx;
  
  .logo {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }
  
  .slogan {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
}

.form-section {
  margin-top: 40rpx;
  
  .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    padding: 10rpx 30rpx;
    transition: all 0.3s;
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 8rpx;
    height: 90rpx;
    
    .input-icon {
      margin-right: 20rpx;
      display: flex;
      align-items: center;
    }
    
    .input-item {
      flex: 1;
      height: 90rpx;
      font-size: 32rpx;
      color: #333;
      border: none;
      background: transparent;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .password-toggle {
      padding: 10rpx;
    }
  }
  
  // 其他样式保持不变
}

  
  .login-btn {
    background: linear-gradient(to right, #0086ff, #00b0ff);
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    font-size: 32rpx;
    margin-top: 60rpx;
    box-shadow: 0 10rpx 20rpx rgba(0, 134, 255, 0.2);
    transition: all 0.2s;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 5rpx 10rpx rgba(0, 134, 255, 0.2);
    }
  }
  
  .action-links {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    font-size: 28rpx;
    
    .forget-pwd {
      color: #999;
    }
    
    .register-link {
      color: #0086ff;
    }
  }

.other-login {
  margin-top: 100rpx;
  
  .divider {
    display: flex;
    align-items: center;
    margin-bottom: 50rpx;
    
    .line {
      flex: 1;
      height: 1rpx;
      background-color: #e0e0e0;
    }
    
    .text {
      padding: 0 30rpx;
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .social-icons {
    display: flex;
    justify-content: center;
    
    .social-icon {
      margin: 0 40rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
